<template>
  <div class="wrap">
<!--    <img src="../assets/images/head-title.png" class="top-image" alt="Header Image">-->
    <el-row :gutter="24" >
      <el-col :span="8"><dv-decoration-3 style="height: 6vh" /></el-col>
<!--      <el-col :span="8"><dv-decoration-7 style="height: 6vh;"><span class="system-title" >全生命周期科技创新管理系统</span></dv-decoration-7></el-col>-->
      <el-col :span="8"><img src="../assets/images/1712155508764.jpg" class="top-image" alt="Header Image"></el-col>
      <el-col :span="8"><dv-decoration-3 :reverse="true" style="height: 6vh" /></el-col>
    </el-row>
    <!--左上模块 数据统计-->
    <div class="upperleft">
      <div style="display: flex; align-items: center;">
        <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-left:15px;margin-right:5px; float: left;margin-top:2px"></span>
        <span style="color: white">数据统计</span>
      </div>

    </div>

    <!--中上模块 科技成果统计-->
    <div class="soso">
      <div style="display: flex; align-items: center;">
        <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-left:15px;margin-right:5px; float: left;margin-top:2px"></span>
        <span style="color: white">科技成果统计</span>
      </div>

    </div>

    <!--右上模块 本年研发费归集实时监控-->
    <div class="upperright">
      <div style="display: flex; align-items: center;">
        <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-left:15px;margin-right:5px; float: left;margin-top:2px"></span>
        <span style="color: white">本年研发费归集实时监控</span>
      </div>

    </div>

    <!--左下模块 综合数据统计-->
    <div class="lowerleft">
      <div style="display: flex; align-items: center;">
        <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-left:15px;margin-right:5px; float: left;margin-top:2px"></span>
        <span style="color: white">综合数据统计</span>
      </div>

    </div>

    <!--中间模块 科技荣誉-->
    <div class="middle">
      <div style="display: flex; align-items: center;">
        <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-left:15px;margin-right:5px; float: left;margin-top:2px"></span>
        <span style="color: white">科技荣誉</span>
      </div>


    </div>

    <!--中下模块 会议安排-->
    <div class="lowermiddle">
      <div style="display: flex; align-items: center;">
        <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-left:15px;margin-right:5px; float: left;margin-top:2px"></span>
        <span style="color: white">会议安排</span>
      </div>

    </div>

    <!--右下模块 审核待办-->
    <div class="lowerright">
      <div style="display: flex; align-items: center;">
        <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-left:15px;margin-right:5px; float: left;margin-top:2px"></span>
        <span style="color: white">审核待办</span>
      </div>

    </div>


  </div>
</template>
<script>

export default {
  data() {
    return {
    };
  },
  mounted() {
  },
  methods: {}
}
</script>

<style scoped>
.wrap {
  position: relative;
  background: url('../assets/images/bg.png') center center no-repeat, #0D1623; /*添加背景图片和颜色*/
  background-size: cover;
  width: 100%;
  height: 100vh;
  border: 2px dashed #aaa;
  overflow: hidden; /* 防止 leftpart 超出 wrap */
}
.top-image {
  top: 6%;
  left: 0;
  width: 100%;
  height: 6%; /* 调整图片高度为屏幕高度的6% */
  object-fit: cover; /* 图片填充方式 */
}
/*.top-image {*/
/*  position: absolute;*/
/*  top: 0;*/
/*  left: 0;*/
/*  width: 100%;*/
/*  height: 6%; !* 调整图片高度为屏幕高度的6% *!*/
/*  object-fit: cover; !* 图片填充方式 *!*/
/*}*/

/* 左上 */
.upperleft{
  position: absolute;
  top: 6%; /* 距离上面 6% */
  bottom: 58%; /* 距离下面 60% */
  left: 1%; /* 距离左侧1% */
  width:28%;
  border: 2px dashed #aaa;
  background-color: rgba(9, 37, 59, 0.5); /* 模块背景颜色 并透明显示 */
}
/* 中上 */
.soso{
  position: absolute;
  top: 6%; /* 距离上面 6% */
  bottom: 58%; /* 距离下面 60% */
  left: 30%; /* 距离左侧1% */
  width:40%;
  border: 2px dashed #aaa;
  background-color: rgba(9, 37, 59, 0.5);
}
/* 右上 */
.upperright{
  position: absolute;
  top: 6%; /* 距离上面 6% */
  bottom: 58%; /* 距离下面 60% */
  left: 71%; /* 距离左侧1% */
  width:28%;
  border: 2px dashed #aaa;
  background-color: rgba(9, 37, 59, 0.5);
}
/* 左下 */
.lowerleft{
  position: absolute;
  top: 43%; /* 距离上面 43% */
  bottom: 1%; /* 距离下面 50% */
  left: 1%; /* 距离左侧1% */
  width:28%;
  border: 2px dashed #aaa;
  background-color: rgba(9, 37, 59, 0.5);
}
/* 中 */
.middle{
  position: absolute;
  top: 43%; /* 距离上面 43% */
  bottom: 30%; /* 距离下面 50% */
  left: 30%; /* 距离左侧1% */
  width:40%;
  border: 2px dashed #aaa;
  background-color: rgba(9, 37, 59, 0.5);
}
/* 中下 */
.lowermiddle{
  position: absolute;
  top: 70%; /* 距离上面 43% */
  bottom: 1%; /* 距离下面 50% */
  left: 30%; /* 距离左侧1% */
  width:40%;
  border: 2px dashed #aaa;
  background-color: rgba(9, 37, 59, 0.5);
}
/* 右下 */
.lowerright{
  position: absolute;
  top: 43%; /* 距离上面 43% */
  bottom: 1%; /* 距离下面 50% */
  left: 71%; /* 距离左侧1% */
  width:28%;
  border: 2px dashed #aaa;
  background-color: rgba(9, 37, 59, 0.5);
}
</style>
